<template>
  <div>
    <div class="demo-input-suffix gl_searchBox">
      <!-- table的选择条件 -->
      <el-row :gutter="20">
        <el-col :md="7" :lg="5">
          <p>项目</p>
          <el-select v-model="Api_GET_EventsManagementEventResultEventRankListQO.CategoryId" size="small" placeholder="请选择" filterable @change="findEventTabelDataList()">
            <el-option v-for="(data, index) in eventType" :key="index" :label="data.name" :value="data.id" />
          </el-select>
        </el-col>
      </el-row>
    </div>
    <!-- tabel表格 -->
    <div>
      <el-table key="a0" v-loading="loading" class="object_ank" :data="tableData" tooltip-effect="dark" style="width: 100%" size="mini">
        <el-table-column prop="eventName" label="项目名称" width="180" />
        <el-table-column label="金牌" min-width="190">
          <template slot-scope="{ row }">
            <div v-for="(item,index) in row._rankInfos._1" :key="index" style="display:inline-block">
              <div class="name_box">
                <PersonalImage v-if="row.registerTypeCode == 'I'" :imgurl="item.imagePath" :imgheight="'40px'" />
                <img v-else :src="getStaticFileUrl(item.imagePath)" class="object_img" width="20" @error="errorPhoto">
                <el-popover v-if="row.registerTypeCode == 'I'" placement="bottom" width="300" trigger="hover" :content="item.registerName">
                  <span slot="reference" class="item_name">{{ item.registerName }}</span>
                </el-popover>
                <el-popover v-else placement="bottom" width="300" trigger="hover" :content="item.memberNames">
                  <span slot="reference" class="item_name">{{ item.memberNames }}</span>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="银牌" min-width="190">
          <template slot-scope="{ row }">
            <div v-for="item in row._rankInfos._2" :key="item.name" style="display:inline-block">
              <div class="name_box">
                <PersonalImage v-if="row.registerTypeCode == 'I'" :imgurl="item.imagePath" :imgheight="'40px'" />
                <img v-else :src="getStaticFileUrl(item.imagePath)" class="object_img" width="20" @error="errorPhoto">
                <el-popover v-if="row.registerTypeCode == 'I'" placement="bottom" width="300" trigger="hover" :content="item.registerName">
                  <span slot="reference" class="item_name">{{ item.registerName }}</span>
                </el-popover>
                <el-popover v-else placement="bottom" width="300" trigger="hover" :content="item.memberNames">
                  <span slot="reference" class="item_name">{{ item.memberNames }}</span>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="铜牌" min-width="190">
          <template slot-scope="{ row }">
            <div v-for="item in row._rankInfos._3" :key="item.name" style="display:inline-block">
              <div class="name_box">
                <PersonalImage v-if="row.registerTypeCode == 'I'" :imgurl="item.imagePath" :imgheight="'40px'" />
                <img v-else :src="getStaticFileUrl(item.imagePath)" class="object_img" width="20" @error="errorPhoto">
                <el-popover v-if="row.registerTypeCode == 'I'" placement="bottom" width="300" trigger="hover" :content="item.registerName">
                  <span slot="reference" class="item_name">{{ item.registerName }}</span>
                </el-popover>
                <el-popover v-else placement="bottom" width="300" trigger="hover" :content="item.memberNames">
                  <span slot="reference" class="item_name">{{ item.memberNames }}</span>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="_4" label="第四名" min-width="190">
          <template slot-scope="{ row }">
            <div v-for="item in row._rankInfos._4" :key="item.name" style="display:inline-block">
              <div class="name_box">
                <PersonalImage v-if="row.registerTypeCode == 'I'" :imgurl="item.imagePath" :imgheight="'40px'" />
                <img v-else :src="getStaticFileUrl(item.imagePath)" class="object_img" width="20" @error="errorPhoto">
                <el-popover v-if="row.registerTypeCode == 'I'" placement="bottom" width="300" trigger="hover" :content="item.registerName">
                  <span slot="reference" class="item_name">{{ item.registerName }}</span>
                </el-popover>
                <el-popover v-else placement="bottom" width="300" trigger="hover" :content="item.memberNames">
                  <span slot="reference" class="item_name">{{ item.memberNames }}</span>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="_5" label="第五名" min-width="190">
          <template slot-scope="{ row }">
            <div v-for="item in row._rankInfos._5" :key="item.name" style="display:inline-block">
              <div class="name_box">
                <PersonalImage v-if="row.registerTypeCode == 'I'" :imgurl="item.imagePath" :imgheight="'40px'" />
                <img v-else :src="getStaticFileUrl(item.imagePath)" class="object_img" width="20" @error="errorPhoto">
                <el-popover v-if="row.registerTypeCode == 'I'" placement="bottom" width="300" trigger="hover" :content="item.registerName">
                  <span slot="reference" class="item_name">{{ item.registerName }}</span>
                </el-popover>
                <el-popover v-else placement="bottom" width="300" trigger="hover" :content="item.memberNames">
                  <span slot="reference" class="item_name">{{ item.memberNames }}</span>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="_6" label="第六名" min-width="190">
          <template slot-scope="{ row }">
            <div v-for="item in row._rankInfos._6" :key="item.name" style="display:inline-block">
              <div class="name_box">
                <PersonalImage v-if="row.registerTypeCode == 'I'" :imgurl="item.imagePath" :imgheight="'40px'" />
                <img v-else :src="getStaticFileUrl(item.imagePath)" class="object_img" width="20" @error="errorPhoto">
                <el-popover v-if="row.registerTypeCode == 'I'" placement="bottom" width="300" trigger="hover" :content="item.registerName">
                  <span slot="reference" class="item_name">{{ item.registerName }}</span>
                </el-popover>
                <el-popover v-else placement="bottom" width="300" trigger="hover" :content="item.memberNames">
                  <span slot="reference" class="item_name">{{ item.memberNames }}</span>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="_7" label="第七名" min-width="190">
          <template slot-scope="{ row }">
            <div v-for="item in row._rankInfos._7" :key="item.name" style="display:inline-block">
              <div class="name_box">
                <PersonalImage v-if="row.registerTypeCode == 'I'" :imgurl="item.imagePath" :imgheight="'40px'" />
                <img v-else :src="getStaticFileUrl(item.imagePath)" class="object_img" width="20" @error="errorPhoto">
                <el-popover v-if="row.registerTypeCode == 'I'" placement="bottom" width="300" trigger="hover" :content="item.registerName">
                  <span slot="reference" class="item_name">{{ item.registerName }}</span>
                </el-popover>
                <el-popover v-else placement="bottom" width="300" trigger="hover" :content="item.memberNames">
                  <span slot="reference" class="item_name">{{ item.memberNames }}</span>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="_8" label="第八名" min-width="190">
          <template slot-scope="{ row }">
            <div v-for="item in row._rankInfos._8" :key="item.name" style="display:inline-block">
              <div class="name_box">
                <PersonalImage v-if="row.registerTypeCode == 'I'" :imgurl="item.imagePath" :imgheight="'40px'" />
                <img v-else :src="getStaticFileUrl(item.imagePath)" class="object_img" width="20" @error="errorPhoto">
                <el-popover v-if="row.registerTypeCode == 'I'" placement="bottom" width="300" trigger="hover" :content="item.registerName">
                  <span slot="reference" class="item_name">{{ item.registerName }}</span>
                </el-popover>
                <el-popover v-else placement="bottom" width="300" trigger="hover" :content="item.memberNames">
                  <span slot="reference" class="item_name">{{ item.memberNames }}</span>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="gl_pt_20" style="text-align: center;">
        <el-pagination
          :current-page="Api_GET_EventsManagementEventResultEventRankListQO.Page"
          :page-size="Api_GET_EventsManagementEventResultEventRankListQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row>
    </div>
  </div>
</template>
<script>
import { Api_GET_EventsManagementEventResultEventRankListQO } from '@/lib/form/game/swaggerForm';
import defaultGameLogo from '@/assets/images/face_default.png';
import PersonalImage from '@/components/PersonalImage/index';
import {
  api_GET_EventsManagementCategory, // 获取项目类别列表
  api_GET_EventsManagementEventResultEventRankList // 按类别查询奖牌榜
} from '@/extend/api/gameswaggerApi/app.js';

export default {
  name: 'ObjectRank',
  components: {
    PersonalImage
  },
  data() {
    return {
      gameId: '',
      Api_GET_EventsManagementEventResultEventRankListQO: new Api_GET_EventsManagementEventResultEventRankListQO(),
      defaultGameLogo: defaultGameLogo,
      totalPage: 0, // 总条目数
      loading: false,
      eventType: [],
      tableData: []
    };
  },
  created() {
    var currentUrl = location.href;
    var num = currentUrl.indexOf('?');
    currentUrl = currentUrl.substr(num + 1);
    var currentId = currentUrl;
    var num1 = currentId.indexOf('=');
    currentId = currentId.substr(num1 + 1);
    this.gameId = currentId;
    this.Api_GET_EventsManagementEventResultEventRankListQO.MaxResultCount = 50;
    this.getCategory();
  },
  methods: {
    // 查询数据
    findEventTabelDataList(page) {
      this.loading = true;
      this.Api_GET_EventsManagementEventResultEventRankListQO.CompetitionId = this.gameId;
      this.Api_GET_EventsManagementEventResultEventRankListQO.Page = page || 1;
      this.Api_GET_EventsManagementEventResultEventRankListQO.SkipCount = (this.Api_GET_EventsManagementEventResultEventRankListQO.Page - 1) * this.Api_GET_EventsManagementEventResultEventRankListQO.MaxResultCount;
      api_GET_EventsManagementEventResultEventRankList(this.Api_GET_EventsManagementEventResultEventRankListQO).then(res => {
        const data = res.items || [];
        this.tableData = this.handleReturnData(data);
        this.totalPage = res.totalCount;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
        this.$message({ type: 'error', message: '获取奖牌榜失败！' });
      });
    },
    handleReturnData(data) {
      let newData = data.map(ktem => {
        return { ...ktem, isEdit: false };
      });
      newData = newData.map(item => {
        for (let i = 0; i < item.rankInfos.length; i++) {
          const list = item.rankInfos[i];
          if (list.memberNames) {
            let str = '';
            for (let j = 0; j < list.memberNames.length; j++) {
              const jtem = list.memberNames[j];
              str = str + jtem;
              if (j !== list.memberNames.length - 1) {
                str = str + '/' + ' ';
              }
            }
            list.memberNames = str;
          }
        }
        return { ...item };
      });
      const returnNewData = this.handleEvent(newData);
      return returnNewData;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultGameLogo;
    },
    // 获取项目列表
    getCategory() {
      api_GET_EventsManagementCategory({ competitionId: this.gameId }).then(res => {
        this.eventType = res.items;
        this.Api_GET_EventsManagementEventResultEventRankListQO.CategoryId = res.items[0].id;
        this.findEventTabelDataList();
      });
    },
    // 处理event
    handleEvent(eventInfos) {
      const returnEventInfos = [];
      for (let i = 0; i < eventInfos.length; i++) {
        const item = eventInfos[i];
        item._rankInfos = this.handleMedal(item.rankInfos);
        returnEventInfos.push(item);
      }
      return returnEventInfos;
    },
    // 处理medal
    handleMedal(rankInfos) {
      const returnRankInfo = {};
      for (let i = 0; i < rankInfos.length; i++) {
        const item = rankInfos[i];
        returnRankInfo['_' + item.rank] = returnRankInfo['_' + item.rank] || [];
        returnRankInfo['_' + item.rank].push(item);
      }
      return returnRankInfo;
    },
    // 获取静态文件地址
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.Api_GET_EventsManagementEventResultEventRankListQO.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.findEventTabelDataList();
    },
    pageIndexChange(currentPage) {
      this.findEventTabelDataList(currentPage);
    }
  }
};
</script>
<style scoped>
.object_img{
  height: 40px;
  width: 40px;
  overflow: hidden;
  vertical-align: middle;
  display: inline-block;
}
.object_ank{
  margin-top:20px;
}
.name_box {
  width: 180px;
  overflow: hidden;
}
.item_name{
  width: 100px;
  /* position: relative;
  top: -5px; */
  vertical-align: middle;
  padding-left: 5px;
  margin-right: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}
.gl_searchBox p {
  font-size: 16px;
  width: 20%;
  display: inline-block;
}
.gl_searchBox .el-select {
  width: 80%;
  display: inline-block;
}
</style>
